@import './base.css';
@import './base64.css';
@import './outline.css';

#app {
	/* padding: 2rem; */
	font-weight: normal;
}

a,
.green {
	text-decoration: none;
	/* color: hsla(160, 100%, 37%, 1); */
	transition: 0.4s;
	padding: 3px;
}

@media (hover: hover) {
	a:hover {
		/* background-color: hsla(160, 100%, 37%, 0.2); */
		/* color: #649cf0; */
	}
}

@media (min-width: 1024px) {
	body {
		/* display: flex; */
		place-items: center;
	}

	#app {
		/* display: grid;
    grid-template-columns: 1fr 1fr; */
		/* padding: 0 2rem; */
	}
}

.pageCommonContainer {
	flex: 1;
	width: 1000px;
	margin: 0 auto;
}

.pageCommonContainer > .wrap {
	width: 100%;
	padding-top: 40px;
}

.ripple {
	position: absolute;
	border-radius: 50%;

	background-image: radial-gradient(circle, rgba(0, 0, 255, 1), rgba(0, 0, 255, 0.5),rgba(0, 0, 255, 0.1));
	transform: scale(0);
	animation: ripple-animation 1500ms ease-in 1;
}

@keyframes ripple-animation {
	/* 0%{
    transform: scale(0);
    opacity: 1;
  }
  50%{
    transform: scale(2);
    opacity: 0.5;
  }
  75%{
    transform: scale(3);
    opacity: 0.25;
  } */
	to {
		transform: scale(1);
		opacity: 0;
	}
}
